<template>
	<view class="userinfos">
		<uni-list>
			<uni-list-item title="头像" showArrow
				:thumb="userinfo.headimgurl"
				thumb-size="lg"></uni-list-item>
			<uni-list-item title="昵称" :rightText="userinfo.nickname" showArrow></uni-list-item>
			<uni-list-item title="手机号" :rightText="userinfo.mobile" showArrow></uni-list-item>
			<uni-list-item title="收货地址" showArrow to="/pagesA/my/address/addressList"></uni-list-item>
			<uni-list-item title="邀请码" v-if="!userinfo.superior_code && !version.embedded" showArrow to="/pagesA/my/userinfo/invitePerson"></uni-list-item>
			<uni-list-item title="邀请码" v-if="userinfo.superior_code && !version.embedded" :rightText="userinfo.superior_code" showArrow></uni-list-item>
			<uni-list-item title="支付安全" :rightText="userinfo.pay_password ? '修改支付密码' : '还未设置支付密码'" showArrow to="/pagesA/my/userinfo/editPwd"></uni-list-item>
		</uni-list>
		<!-- #ifdef MP-WEIXIN -->
		<button type="primary" class="operate_btn" @click="syncInfo">头像昵称同步微信</button>
		<!-- #endif -->
	</view>
</template>

<script>
	import { version } from "@/common/config.js"
	import {
		mapState,
	} from 'vuex';
	export default {
		data() {
			return {
				version: version
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		created() {
		},
		methods: {
			// 同步微信
			syncInfo() {
				wx.showModal({
					title: '提示',
					content: '是否同步微信头像和昵称？',
					success: (res)=> {
						if (res.confirm) {
							console.log('用户点击确定')
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.userinfos {
		margin: 0 20rpx;

		.operate_btn {
			width: 76%;
			margin: 240rpx 12%;
			background: linear-gradient(360deg, #EE4629 0%, #EE653A 100%);
			box-shadow: 0px 20rpx 36rpx 0px rgba(238, 73, 43, 0.25);
			border-radius: 42rpx;
		}
	}

	/deep/ .uni-list-item__content-title {
		color: #6F6F6F;
		font-size: 28rpx;
	}

	/deep/ .uni-list-item__extra-text {
		color: #363636;
		font-size: 28rpx;
	}

	/deep/ .uni-list-item__container {
		position: relative;
	}

	/deep/ .uni-list-item__header {
		position: absolute;
		right: 0;
	}

	/deep/ .uni-list--lg {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		margin-top: -14rpx;
		margin-right: -16rpx;
	}

	/deep/ .uni-list-item__container {
		padding: 28rpx 0;
	}

	/deep/ .uni-list--border-bottom {
		background-color: transparent;
	}

	/deep/ .uni-icon-wrapper {
		padding: 0 0 0 16rpx;
	}
</style>
